
<style lang="less">
	.navhead {
		padding: 0 30rpx;
		height: 88rpx;
		background: #fff;
		width: 100%;
		border-bottom: 1px solid #EDEDED;
		position: fixed;
		top: var(--status-bar-height);
		z-index: 99;
		.icon-zuo {
			font-size: 32rpx;
			color: #333;
		}
	}
	.my_count{
		margin-top: calc(88rpx + var(--status-bar-height));
		height: 200rpx;
		padding: 0 30rpx;
		align-items: flex-start;
		border-bottom: 20rpx solid rgba(0,0,0,0.03);
		.my_title{
			font-size: 25rpx;
			color: #999;
		}
		.my_num{
			color: #F3404F;
			font-size: 45rpx;
			font-weight: 500;
			margin: 10rpx 0 0;
			letter-spacing: 1px;
		}
	}
	.toggle_get{
		padding: 0 30rpx;
		.title{
		}
	}
	.num_title{
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		letter-spacing: 1px;
			padding: 20rpx 0;
		&::before{
			content: '';
			display: inline-block;
			width: 3px;
			margin: 6rpx 15rpx 0 0;
			height: 28rpx;
			background: #F3404F;
		}
	}
	.radio_box{
		display: flex;
		flex-wrap: wrap;
		.radio_item{
			width: 250rpx;
			margin: 20rpx 0 0;
			height: 80rpx;
			font-size: 28rpx;
			color: #333;
			border-radius: 8rpx;
			border: 1px solid #999;
		}
	}
	.radio_active{
		border: 1px solid #F3404F !important;
		position: relative !important;
		transition: all 0.5s;
		&::before{
			content: '\e604';
			width: 30rpx;
			height: 30rpx;
			background: #F3404F;
			position: absolute;
			right: -1px;
			top: -1px;
			color: #fff;
			border-radius:0 8rpx 0 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.toset{
		padding: 50rpx 0 40rpx;
		border-bottom: 1px solid rgba(0,0,0,0.04);
		.icon-aliba{
			font-size: 40rpx;
			color: #2F7BFE;
		}
		text{
			font-size: 28rpx;
			letter-spacing: 1px;
			font-weight: 500;
			margin: 0 0 0 20rpx;
		}
	}
	.get_money{
		margin: 0 30rpx;
		padding: 0 0 20rpx;
		border-bottom: 1px solid rgba(0,0,0,0.03);
		.get_box{
			display: flex;
			flex-wrap: wrap;
			.get_item{
				width: 32%;
				height: 145rpx;
				border: 1px solid #EDEDED;
				border-radius: 8rpx;
				margin: 0 2% 10rpx 0;
				font-size: 32rpx;
				color: #111;
				&:nth-child(3n){
					margin: 0 0 10rpx;
				}
				// &>text:first-child{
				// 	font-size: 32rpx;
				// 	color: #111;
				// }
				// &>text:last-child{
				// 	font-size: 20rpx;
				// 	margin: 10rpx 0 0;
				// 	color: #999;
				// 	letter-spacing: 1rpx;
				// }
			}
		}
	}
	.tis{
		margin: 20rpx 30rpx 0;
		&>view{
			font-size: 27rpx;
			line-height: 55rpx;
			letter-spacing: 1px;
			color: #999;
			font-weight: 500;
		}
		text{
			color: red;
		}
	}
	.btn_box{
		width: 100%;
		height: 100rpx;
		background: #fff;
		border-top: 1px solid rgba(0,0,0,0.03);
		position: fixed;
		bottom: 0;
		left: 0;
		&>view{
			width: 90%;
			height: 80%;
			background: #FC474C;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 1px;
			border-radius: 8rpx;
		}
	}
</style>
<template>
	<view>
		<view class="status_bar status_bar_bak"></view>
		<view class="navhead flex_r_between">
			<i class='iconfont icon-zuo' @click='$back'></i>
			<text>提现</text>
			<text></text>
		</view>
		<view class="my_count flex_coum_center">
			<view class="my_title">
				当前余额(可提现金额)
			</view>
			<view class="my_num">
				<text>{{userInfo.gold ? userInfo.gold.toString().replace(/(?=(\B)(\d{3})+$)/g,',') : '0'}}</text>
				<text style="margin: 0 0 0 10rpx;">金币</text>
			</view>
		</view>
		<view class="toggle_get">
			<view class="num_title flex_v_venter">
				提现方式
			</view>
			<view class="radio_box">
				<view class="radio_item flex_center iconfont radio_active">
					支付宝
				</view>
			</view>
			<view class="toset flex_r_between" @click="$go('./addpay')">
				<view class="flex_v_venter">
					<i class='iconfont icon-aliba'></i>
					<text>{{userInfo.alipayAccount ? '支付宝:' + userInfo.alipayAccount.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '您尚未设置支付宝账户'}}</text>
				</view>
				<i class='iconfont icon-right'></i>
			</view>
		</view>
		<view class="get_money">
			<view class="num_title flex_v_venter">
				提现金额
			</view>
			<view class="get_box">
				<view :class="['get_item','flex_coum_center',getindex == index ? 'radio_active' : '' , 'iconfont']" :style="item.price < 1000 / 10 ? '' : 'opacity: 0.3;border-color:#ccc'" @click="changeIndex(item,index)" v-for="(item,index) in list">
					<text>{{item.price}}元</text>
					<!-- <text>立即返还{{item.coin}}金币</text> -->
				</view>
			</view>
		</view>
		<view class="tis">
			<view class="">
				注意事项:
			</view>
			<view class="">
				1.提现申请将在1-3个工作日内审批到账，请耐心等待。
			</view>
		</view>
		<view class="btn_box flex_center">
			<view class="flex_center">
				立即兑换
			</view>
		</view>
		<view class="" style="height: 100rpx;">
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				list:[
					{
						price:'1.00',
						coin:'0'
					},{
						price:'5.00',
						coin:'1000'
					},{
						price:'10.00',
						coin:'1000'
					},{
						price:'20.00',
						coin:'1000'
					},{
						price:'50.00',
						coin:'3000'
					},{
						price:'100.00',
						coin:'8000'
					},{
						price:'500.00',
						coin:'50000'
					}
				],
				getindex:-1,
			};
		},
		computed:{
			...mapState(['userInfo'])
		},
		methods:{
			changeIndex(item,index){
				if(item.price < 1000 / 10) {
					this.getindex = index
				}
			},
		}
	}
</script>

